/*
    * @module:views/budget/compilationSummary/constructionDetail
    * @author:silas
    * @date:2021-01-27
    * 滚投结构上报
*/
<template>
  <div class="budgetRelease_container">
    <div class="contentTopTitle">
      <div>
        <div class="title">滚投结构上报</div>
      </div>
      <el-button size="mini" style="margin-left: 15px;" @click="$router.go(-1)">返回</el-button>
    </div>
    <div class="title">{{description}}</div>
    <!-- <p class="m10">
      截止：
      <span>{{acctMonth}}</span>
    </p>-->
    <!-- <el-form :inline="true" :model="form" label-width="60px" class="m10">
      <el-form-item label="截止:">
        <span class="mt2">{{acctMonth}}</span>
      </el-form-item>
      <el-form-item label="区域">
        <dx-cascader :area_id.sync="form.areaId" :maxLevel="2" />
      </el-form-item>
      <el-form-item label="年度">
        <el-date-picker size="mini" v-model="form.acctYear" value-format="yyyy" type="year" placeholder="选择年"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="handle_search()">查询</el-button>
      </el-form-item>
    </el-form> -->
    <div class="tableBox">
      <el-table

        id="table"
        size="mini"
        :header-cell-style="{ background: '#eef1f6' }"
        :data="tableData"
        v-loading="tableLoading"
        style="width: 100%;"
        border
        :cell-style="columnStyle"
      >
        <el-table-column label="指标" prop="indexName" width="240" />
        <el-table-column label="单位" prop="unit" width="100" />
        <el-table-column v-for="(it, i) in title" :key="i" :prop="it.value" min-width="200">
           <template slot-scope="scope" slot="header">
            <el-tooltip class="item" effect="dark" :content="it.tip" placement="top">
          <span>{{it.label + ' ('+ it.time + ')'}}</span>
        </el-tooltip>
         </template>
        </el-table-column>
      </el-table>
    </div>
     <div class="check" v-if="type">
        <el-form :model="form">
          <el-form-item label="审核意见:" label-width="70">
            <el-radio v-model="form.status" label="1">通过审核</el-radio><el-radio v-model="form.status" label="2">未通过审核</el-radio>
          </el-form-item>
        </el-form>
        <div class="desc">
            <span class="title">意见说明:</span><div class="textarea"><el-input type="textarea" resize="none" maxlength="200" :rows="4" v-model="form.auditExplain" /></div>
        </div>
        <div class="btns">
          <el-button size="mini" type="primary" @click="handleCheck()">确定</el-button> <el-button size="mini" @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
  </div>
</template>

<script>
import { $budgetAPI } from '@/api/';
import { getSessionStorage } from '@/common/js/storage';
export default {
    data() {
        return {
            tableData: [],
            tableLoading: false,
            title: [],
            acctMonth: '',
            accountInfo: null,
            form: {
                id: '',
                status: '',
                auditExplain: ''
            },
            description: '',
            type: '',
            col: '',
        };
    },
    mounted() {
        this.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
        this.getDetail();
    },
    //
    methods: {
      getDetail() {
          var that = this, 
              id = that.$route.query.id, 
              title = [], content;

          that.type = that.$route.query.type;
          that.tableLoading = true;
          that.form.id = id;
          $budgetAPI.getConstructionDetail({
            reportId: id
          }, res => {
            console.log(res);
            content = res.content;
            content.titles.map((it, i) => {

                if(it.id == id) {
                  that.col = i + 2; 
                }
                var obj = {
                   label: '上报' + (i + 1),
                   value: 'indexValue' + i,
                   tip: it.rexplain,
                   time: it.createTime.substr(0, 10)
                }
                title.push(obj);
            });
            that.title = title;
            content.data.map((it) => {
                it.detailList.map((item,i) => {
                  it['indexValue' + i] = item.indexValue;
                })
            });
            that.description = content.testYear + '年' + content.areaName + '上报' + content.description;
            that.tableData = content.data;
            that.tableLoading = false;
          })
      },
      handleCheck() {
        var that = this;

        console.log(that.form); 
        if(!that.form.status) {
           that.$message({
                  type: "error",
                  message: "请选择审核意见",
            });
            return false;
        }
        if(that.form.status == 2 && !that.form.auditExplain.length) {
            that.$message({
                  type: "error",
                  message: "未通过审核需填写意见说明",
            });
            return false;
        }
        $budgetAPI.getConstructionDetailCheck({
             reportId: that.form.id,
             status: that.form.status,
             auditExplain: that.form.auditExplain
        }, res => {
          if(res.code == 0) {
             that.$message({
                  type: "success",
                  message: "审核成功",
            });
            that.$router.push({ path: '/budget/constructionCheck' })
          } else {
             that.$message({
                  type: "success",
                  message: res.message,
            });
          }
           
          })
      },
      columnStyle({ row, column, rowIndex, columnIndex }) {
        var that = this;

        if(columnIndex == that.col) {
          return 'background: #d7e5fb;';
        }
      }
    },
   
};
</script>

<style lang="scss" scoped>
.budgetRelease_container {
    .contentTopTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .title {
          font-size: 14px;
          font-weight: bold;
          margin: 10px 0;
        }
    .m10 {
        margin: 10px 0;
    }
    .mt2 {
        margin-top: 2px;
        display: inline-block;
    }
    .check {
      margin-top: 10px;
      .desc {
          display: flex;
          .title {
            width: 70px;
            font-size: 14px;
            color: #606266;
            font-weight: normal;
          }
          .textarea {
            flex: 1;
          }
      }
      .btns {
        margin: 10px 0;
        display: flex;
        text-align: center;
        justify-content: center;
      }
    }
}
</style>